<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>智能输送机监测系统</title>
    
    <!-- CDN 依赖 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>

        .backgroundd {
            background-image: url('./resources/bg.png');  
            background-size: cover; /* 让背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中显示 */      
        }

        /* 转换后的CSS */
        .login-container {
            height: 100vh;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .background-container {
            position: absolute;
            inset: 0;
            z-index: 0;
            background-size: cover;
            background-position: center;
            transition: background-image 1.5s ease-in-out;
        }

        /* 现有代码 */
        .background-container::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
            backdrop-filter: blur(8px);
        }

        .login-card {
            position: relative;
            z-index: 10;
            width: 384px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            padding: 24px;
        }

        .login-card:hover {
            transform: translateY(-4px);
        }

        .logo-container {
            text-align: center;
            margin-bottom: 32px;
        }

        .logo-container h1 {
            font-size: 24px;
            font-weight: bold;
            color: #1f2937;
            margin-bottom: 8px;
        }

        .subtitle {
            font-size: 14px;
            color: #6b7280;
        }

        .captcha-container {
            display: flex;
            gap: 8px;
        }

        .captcha-image {
            width: 128px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #dcdfe6;
        }

        .forgot-password {
            float: right;
        }

        .login-btn {
            width: 100%;
            margin-top: 16px;
            letter-spacing: 2px;
        }

        /* 新增样式用于切换注册和登录表单 */
        .switch-btn {
            text-align: center;
            margin-top: 16px;
        }

        .register-form {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-container backgroundd">
            <el-card class="login-card">
                <div class="logo-container">
                    <h1>滚动轴承健康管理系统</h1>
                    <p class="subtitle">Industrial Conveyor Monitoring System</p>
                </div>

                <!-- 登录表单 -->
                <el-form :model="form" :rules="rules" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input
                            v-model="form.username"
                            placeholder="用户名"
                            prefix-icon="User"
                            size="large"
                        ></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input
                            v-model="form.password"
                            type="password"
                            placeholder="密码"
                            prefix-icon="Lock"
                            size="large"
                            show-password
                        ></el-input>
                    </el-form-item>

                    <el-form-item prop="captcha">
                        <div class="captcha-container">
                            <el-input
                                v-model="form.captcha"
                                placeholder="验证码"
                                prefix-icon="Picture"
                                size="large"
                            ></el-input>
                            <img 
                                src="https://pic4.zhimg.com/v2-17a03b9627aa8f850628c14550a0544a_r.jpg" 
                                class="captcha-image"
                                alt="captcha"
                            />
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-checkbox v-model="rememberMe">记住登录</el-checkbox>
                        <el-link type="primary" class="forgot-password">忘记密码?</el-link>
                    </el-form-item>

                    <el-button 
                        type="primary" 
                        size="large"
                        class="login-btn"
                        @click="handleLogin"
                    >
                        登 录
                    </el-button>
                </el-form>

                <!-- 切换按钮 -->
                <div class="switch-btn">
                    <el-button @click="toggleForm">
                        {{ isLogin ? '注册新用户' : '返回登录' }}
                    </el-button>
                </div>

                <!-- 注册表单 -->
                <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef" class="register-form">
                    <el-form-item prop="regUsername">
                        <el-input
                            v-model="registerForm.regUsername"
                            placeholder="用户名"
                            prefix-icon="User"
                            size="large"
                        ></el-input>
                    </el-form-item>

                    <el-form-item prop="regPassword">
                        <el-input
                            v-model="registerForm.regPassword"
                            type="password"
                            placeholder="密码"
                            prefix-icon="Lock"
                            size="large"
                            show-password
                        ></el-input>
                    </el-form-item>

                    <el-form-item prop="regConfirmPassword">
                        <el-input
                            v-model="registerForm.regConfirmPassword"
                            type="password"
                            placeholder="确认密码"
                            prefix-icon="Lock"
                            size="large"
                            show-password
                        ></el-input>
                    </el-form-item>

                    <el-button 
                        type="primary" 
                        size="large"
                        class="login-btn"
                        @click="handleRegister"
                    >
                        注 册
                    </el-button>
                </el-form>
            </el-card>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive } = Vue
        
        createApp({
            setup() {
                const backgrounds = [
                    // 替换为你想要的背景图片路径
                    'https://picsum.photos/1920/1080?grayscale'
                ]

                const currentBg = ref('')
                const bgIndex = ref(0)
                let timer = null

                const form = reactive({
                    username: '',
                    password: '',
                    captcha: ''
                })

                const rememberMe = ref(false)
                const loginForm = ref(null)

                const rules = {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                }

                const changeBackground = () => {
                    bgIndex.value = (bgIndex.value + 1) % backgrounds.length
                    currentBg.value = backgrounds[bgIndex.value]
                }

                // 新增注册表单数据和规则
                const registerForm = reactive({
                    regUsername: '',
                    regPassword: '',
                    regConfirmPassword: ''
                })

                const registerFormRef = ref(null)

                const registerRules = {
                    regUsername: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    regPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ],
                    regConfirmPassword: [
                        { required: true, message: '请确认密码', trigger: 'blur' },
                        { validator: (rule, value, callback) => {
                            if (value !== registerForm.regPassword) {
                                callback(new Error('两次输入的密码不一致'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur' }
                    ]
                }

                const isLogin = ref(true)

                const toggleForm = () => {
                    isLogin.value = !isLogin.value
                    const loginFormElement = document.querySelector('.login-form')
                    const registerFormElement = document.querySelector('.register-form')
                    if (isLogin.value) {
                        loginFormElement.style.display = 'block'
                        registerFormElement.style.display = 'none'
                    } else {
                        loginFormElement.style.display = 'none'
                        registerFormElement.style.display = 'block'
                    }
                }

                const handleRegister = () => {
                    registerFormRef.value?.validate(valid => {
                        if (valid) {
                            console.log('注册数据:', registerForm)
                        }
                    })
                }

                return {
                    currentBg,
                    form,
                    rememberMe,
                    loginForm,
                    rules,
                    handleLogin: () => {
                        loginForm.value?.validate(valid => {
                            if (valid) {
                                console.log('登录数据:', form)
                            }
                        })
                    },
                    mounted() {
                        currentBg.value = backgrounds[0]
                        timer = setInterval(changeBackground, 5000)
                    },
                    beforeUnmount() {
                        clearInterval(timer)
                    },
                    isLogin,
                    toggleForm,
                    registerForm,
                    registerFormRef,
                    registerRules,
                    handleRegister
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>
</body>
</html>